<template>
    <baseView>
        <div class="trendClean">
            <div class="echart-form">
                <el-form :inline="true">
                    <el-form-item label="日期选择">
                        <el-date-picker v-model="params.dateRange" type="daterange" range-separator="-"
                            start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" :disabled-date="onDisable" />
                    </el-form-item>
                    <!-- <el-form-item label="开始时间">
                        <el-date-picker v-model="params.startTime" type="date" />
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker v-model="params.endTime" type="date" />
                    </el-form-item> -->
                    <el-form-item label="垃圾类型">
                        <el-checkbox-group v-model="params.type">
                            <el-checkbox v-for="item in rubbishType" :value="item.value">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getTrendAnalysis">
                            <el-icon style="margin-right: 2px;">
                                <Search />
                            </el-icon>查询
                        </el-button>
                        <el-button type="primary" plain @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="echart-box" id="myChart">
                <chartPane id="trendClean" v-if="showChart" :chartOption="option" />
            </div>
        </div>
    </baseView>
</template>

<script setup>
import { trendAnalysis } from "@/api/cleanCategory"
import dayjs from "dayjs"
const params = reactive({
    dateRange: [dayjs().subtract(7, 'day').format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
    type: ["dry", "wet", "food"]
})



const reqParams = computed(() => {
    return {
        datefrom: params.dateRange[0],
        dateto: params.dateRange[1],
    }
})
function onDisabled(date) {
   return time.getTime() > new Date().getTime()
}

const rubbishType = [
    {
        id: 1,
        name: '干垃圾',
        value: 'dry'
    },
    {
        id: 2,
        name: '湿垃圾',
        value: 'wet'
    },
    {
        id: 3,
        name: '餐厨垃圾',
        value: 'food'
    }
]
let option = ref({})

const showChart = ref(false)
function getTrendAnalysis() {
    showChart.value = false
    trendAnalysis(reqParams.value).then(res => {
        if (res.code == 200) {
            let data = res.data
            // 计算时间
            let xData = data.map((item) => {
                return item['realtime']
            })
            // 计算每种垃圾的量
            let series = [{
                name: '干垃圾',
                type: 'line',
                data: [],
                itemStyle: {
                    color: "#47D1CB", // 折线颜色
                    width: 2, // 折线宽度
                },
                showSymbol: false
            },
            {
                name: '湿垃圾',
                type: 'line',
                data: [],
                itemStyle: {
                    color: "#B296FF", // 折线颜色
                    width: 2, // 折线宽度
                },
                showSymbol: false
            },
            {
                name: '餐厨垃圾',
                type: 'line',
                data: [],
                itemStyle: {
                    color: "#FFD859", // 折线颜色
                    width: 2, // 折线宽度
                },
                showSymbol: false
            }]

            data.forEach(item => {
                series[0].data.push(item['dryweight'])
                series[1].data.push(item['wetweight'])
                series[2].data.push(item['foodweight'])
            })
            const typeMapping = {
                dry: "干垃圾",
                wet: "湿垃圾",
                food: "餐厨垃圾"
            };
            const namesToKeep = Object.values(typeMapping).filter(name =>

                params.type.includes(Object.keys(typeMapping).find(key => typeMapping[key] === name))
            );
            const filterSeries = series.filter(item => namesToKeep.includes(item.name));
            option.value = {


                tooltip: {
                    show: true,
                    trigger: 'axis'
                },
                legend: {
                    data: ['干垃圾', '湿垃圾', '餐厨垃圾'],
                    icon: 'roundRect',
                    itemHeight: 10,
                    itemWidth: 16
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xData
                },
                yAxis: {
                    name: '单位：kg', // 设置 x 轴的标题
                    type: 'value'
                },
                series: filterSeries
            }
            showChart.value = true
        }
    })
}
onMounted(() => {
    getTrendAnalysis()
})


function reset() {
    params.type = ["dry", "wet", "food"]
    params.dateRange = [dayjs().subtract(7, 'day').format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")]
    getTrendAnalysis()
}

</script>

<style lang="scss" scoped>
.trendClean {
    height: 100%;
    width: 100%;

    .echart-form {
        display: flex;
        justify-content: flex-end;
    }

    .echart-box {
        width: 100%;
        height: 80%;
    }
}
</style>